<template>
  <view class="person-msg">
    <!-- #ifdef MP-WEIXIN -->
    <view class="head c-content">
      <button style="padding-left: 0;padding-right: 0" class="avatar-wrapper" open-type="chooseAvatar"
              @chooseavatar="bindchooseavatar">
        <image :src="form.avatar || '/static/missing-face.png'" mode=""></image>
      </button>

      <view>点击修改</view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="head c-content" @click="changeFace">
      <image :src="form.avatar || '/static/missing-face.png'" mode=""></image>
      <view>点击修改</view>
    </view>
    <!-- #endif -->
    <u-form :model="form" ref="uForm" class="form">
      <u-form-item label="昵称" label-width="150">
        <!-- #ifdef MP-WEIXIN -->
        <u-input type="nickname" v-model="form.nickName" placeholder="请输入昵称"/>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <u-input v-model="form.nickName" placeholder="请输入昵称"/>
        <!-- #endif -->
      </u-form-item>
      <u-form-item label="性别" label-width="150">
        <u-radio-group v-model="form.sex" :active-color="lightColor">
          <u-radio name="1">男</u-radio>
          <u-radio name="0">女</u-radio>
        </u-radio-group>
      </u-form-item>

      <u-form-item label="生日" label-width="150" right-icon="arrow-right">
        <div style="width: 100%;" @click="showBirthday = true">{{ birthday || '请选择出生日期' }}</div>
        <u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor" @confirm="selectTime"></u-picker>
      </u-form-item>
      <u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
        <uni-data-picker
            :localdata="areaList"
            placeholder="点击选择"
            popup-title="请选择地区"
            v-model="area"
            @change="onAreachange"
        >
          <text class="word13" v-if="!form.areaIdPath">请选择城市</text>
          <text class="word13" v-else>{{form.areaPath}}</text>
        </uni-data-picker>
      </u-form-item>

      <u-form-item label="手机号" label-width="150">
        <view v-if="form.mobile">
          {{ form.mobile }}
        </view>
        <view v-else>
          <view class="submit" @click="navigateTo(form.username)">绑定手机号码</view>
        </view>
      </u-form-item>

    </u-form>
    <div class="bottom">
      <view class="submit" @click="submit">保存更改</view>
    </div>
  </view>
</template>
<script>
import clStorage from "@/utils/storage.js";
import uFormItem from "@/uview-ui/components/u-form-item/u-form-item.vue";

export default {
  components: {uFormItem},
  data() {
    return {
      showPicker: false,
      area:[],
      lightColor: this.$lightColor, //高亮颜色
      form: {},
      birthday: clStorage.getUserInfo().birthday || "", //生日
      photo: [
        {text: "立即拍照", color: this.$mainColor},
        {text: "从相册选择", color: this.$mainColor},
      ],
      showBirthday: false, //显示生日日期
      areaList:[]
    };
  },
  methods: {

    loadMemberInfo() {
      this.$clApi.member.loadMemberInfo().then((res) => {
        this.form = res.data || {}
      });
    },


    /**
     * 加载本地行政区划数据
     */
    loadCity() {
      this.$clApi.open.getRegionByPid(0).then((res) => {
        this.areaList = res.data;
      });
    },


    /**
     * 提交保存
     */
    submit() {
      delete this.form.___path;
      let params = JSON.parse(JSON.stringify(this.form));
      this.$clApi.member.saveMemberInfo({data: params}).then((res) => {
        clStorage.setUserInfo(res.data);
        uni.navigateBack();
      });
    },

    /**
     * 修改头像
     */
    changeFace(index) {
      let _this = this
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          _this.uploadPic(tempFilePaths[0])
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '头像选取失败',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },


    uploadPic(picPath) {
      const that = this;
      uni.uploadFile({
        url: this.$utils.getUploadUrl(),
        filePath: picPath,
        name: "file",
        success: (uploadFileRes) => {
          let data = JSON.parse(uploadFileRes.data);
          this.form.avatar = data.data.url;
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '头像上传失败',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },
    /**
     * 头像获取回调
     * @param e
     */
    bindchooseavatar(e) {
      const {avatarUrl} = e.detail
      console.log(e.detail)
      this.uploadPic(avatarUrl)
    },

    /**
     * 选择时间
     */
    selectTime(time) {
      this.form.birthday = `${time.year}-${time.month}-${time.day}`;
      this.birthday = `${time.year} - ${time.month} - ${time.day}`;
    },

    navigateTo(username) {
      uni.navigateTo({
        url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
      });
    },
    onAreachange(e) {
      let areaArr = e.detail.value;
      // console.log(333, areaArr);
      if (areaArr.length < 3){
        return;
      }
      this.form.areaIdPath = areaArr.map(item => item.value).join(',')
      this.form.areaPath = areaArr.map(item => item.text).join(',')
    },
  },

  /**
   * 加载数据
   */
  onLoad() {
  },
  onShow() {
    this.loadMemberInfo()
    this.loadCity()
  },
};
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.submit {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  margin-top: 90rpx;

  width: 100%;
  margin: 0 auto;
  color: $main-color;
  border-radius: 100px;
}

.head {
  height: 260rpx;
  color: $font-color-light;
  font-size: $font-sm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2em;

  image {
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
  }
}

/deep/ .u-form {
  background-color: #ffffff;
  padding: 0;
  margin-top: 30rpx;

  .u-form-item {
    padding: 0 20rpx;
    height: 110rpx;
    line-height: 110rpx;
  }
}

.form {
  background-color: #ffffff;
}

.bottom {
  position: fixed;
  bottom: 40px;
  display: flex;
  align-items: center;
  width: 100%;

  > .submit {
    background: $light-color;
    color: #fff;
    width: 80%;
  }
}

.avatar-wrapper {
  width: 144rpx;
  height: 144rpx;
  border-radius: 50%;
}
</style>
